<template>
  <!-- 搜索用户 -->
  <div>
    <div class="search-user-box">
      <el-input
        prefix-icon="el-input__icon el-icon-search"
        placeholder="搜索用户"
        v-model="searchUser"
        size="mini"
        clearable
        style="border: 1px solid #d1d2d3; border-radius: 4px; width: 100%"
      >
      </el-input>
    </div>
    <!-- 消除自身 添加 template -->
    <template v-for="(user, index) in search(searchUser)">
      <el-card
        class="user-card"
        :key="index"
        v-if="user.friendUserId !== userInfo.uid"
      >
        <!-- 每个用户的卡片信息 -->
        <div class="content" @click="emitUser(user.friendUserId, index)">
          <!-- 卡片头像 -->
          <img alt="" :src="user.friendAvatarUrl" class="user-avatar" />
          <!-- 卡片用户昵称 -->
          <div class="nickname">{{ user.friendNickName }}</div>

          <!-- 卡片用户 用户名 -->
          <div class="username">用户名:{{ user.friendUsername }}</div>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
import UserApiRequest from "@/api/UserApiRequest";
const userApiRequest = new UserApiRequest();
export default {
  data() {
    return {
      searchUser: "",
      users: [],
      userInfo: {},
    };
  },
  methods: {
    search(data) {
      if (data.split(" ").join("").length == 0) {
        return this.users;
      } else {
        return this.users.filter((item) => {
          if (item.friendUsername.includes(data)) {
            return item;
          }
        });
      }
    },
    emitUser(data, index) {
      this.$emit("clickUser", data);
    },
  },
  mounted() {
    // 获取用户信息
    userApiRequest.getUserInfo().then((res) => {
      this.users = res.data;
    });

    // 获取登录用户信息
    if (this.$store.state.isLogin) {
      this.userInfo = this.$store.state.userInfo;
    }
  },
  watch: {
    searchUser(newVal) {},
  },
};
</script>

<style scoped lang="scss">
.search-user-box {
  padding: 5px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.user-card {
  padding: 14px;
  cursor: pointer;
  .content {
    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 10%;
      float: right;
    }
    .nickname {
      font-weight: 700;
      margin: 10% 0;
      font-size: 16px;
    }
    .username {
      color: #d3d4d5;
      font-size: 12px;
    }
  }
}
</style>
